<template>
  <div ref="dom" class="charts chart-pie" style="width:100%;height:100%"></div>
</template>
<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import {off, on} from '@/libs/tools'

echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartPie',
  props: {
    value: Array,
    colorA: Array
  },
  data() {
    return {
      dom: null
    }
  },
  methods: {
    resize() {
      this.dom.resize()
    }
  },
  mounted() {
    this.$nextTick(() => {
      // let legend = this.value.map(_ => _.name)
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        grid: {
          top: 0,
          bottom: 15,
          left: 15,
          right: 15
        },
        /* legend: {
            data: legend,
            type: 'scroll'
        }, */
        series: [{
          type: 'pie',
          radius: ['40%', '65%'],
          center: ['50%', '46%'],
          data: this.value,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: false,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          }
        }]
      }

      if (this.colorA && this.colorA.length) {
        option.color = this.colorA
      }
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy() {
    off(window, 'resize', this.resize)
  }
}
</script>
